<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>alertify.js - browser dialogs never looked so good</title>
	<link rel="stylesheet" href="assets/css/main.css" />
	<link rel="stylesheet" href="../themes/alertify.core.css" />
	<link rel="stylesheet" href="../themes/alertify.default.css" id="toggleCSS" />
	<link rel="stylesheet" href="assets/js/lib/sh/shCore.css" />
	<link rel="stylesheet" href="assets/js/lib/sh/shCoreDefault.css" />
	<link href="http://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet" type="text/css">
	<meta name="viewport" content="width=device-width">
	<script>
		// ensure legacy browsers support html5 tags
		// could include a shim or modernizr or...
		// this is a quick workaround for the time being
		document.createElement("nav");
		document.createElement("header");
		document.createElement("article");
		document.createElement("section");
		document.createElement("footer");
	</script>
</head>
<body>
	<header class="masthead">
		<div class="container">
			<p class="mh-logo">alertify<span class="extension">.js</span></p>
			<h1>browser dialogs never<br />looked so good</h1>
			<a href="https://github.com/fabien-d/alertify.js"><img style="position: fixed; z-index: 5000; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
			<img src="assets/img/dialogs.png" alt="Native browser dialogs versus alertify.js dialogs" width="808" height="210" />
		</div>
	</header>

	<h2><span>download alertify.js</span></h2>
    <section class="block">
        <div class="container">
            <div class="cta">
                <a class="button-primary" href="https://github.com/fabien-d/alertify.js/archive/0.3.10.zip">Download 0.3.10 <span class="small">(zip)</span></a>
                <a class="button-primary" href="https://github.com/fabien-d/alertify.js/tree/0.3.10">Source Code <span class="small">(GitHub)</span></a>
            </div>
        </div>
    </section>

	<h2><span>features</span></h2>
	<section class="block">
		<div class="container">
			<div class="row">
				<div class="media feature">
					<div class="mediaAside"><i class="icon-pencil"></i></div>
					<div class="mediaBody">
						<h3>Customizable look and feel</h3>
						<p>If you can edit CSS you can customize the look of alertify.js to match your needs</p>
					</div>
				</div>
				<div class="media feature alt">
					<div class="mediaAside"><i class="icon-ok"></i></div>
					<div class="mediaBody">
						<h3>Lightweight, no dependencies</h3>
						<p>No matter the type of project, if JavaScript is available alertify.js can be used</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="media feature">
					<div class="mediaAside"><i class="icon-bullhorn"></i></div>
					<div class="mediaBody">
						<h3>Growl-like notification</h3>
						<p>Unobtrusive notification messages can be used to give feedback to users or even as a console.log replacement</p>
					</div>
				</div>
				<div class="media feature alt">
					<div class="mediaAside"><i class="icon-laptop"></i></div>
					<div class="mediaBody">
						<h3>Cross-browser and platform</h3>
						<p>Whether you use a desktop, laptop, tablet or mobile device, alertify.js has you covered</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="media feature">
					<div class="mediaAside"><i class="icon-star"></i></div>
					<div class="mediaBody">
						<h3>Simple API</h3>
						<p>From callbacks to handle OK and Cancel actions to customizable properties, using alertify.js is very straightforward<br />
						<a href="https://github.com/fabien-d/alertify.js/wiki/API-Documentation">Read full documentation</a></p>
					</div>
				</div>
			</div>
		</div>
	</section>

	<h2><span>default usage</span></h2>
	<section class="usage">
		<section class="block">
			<div class="container">
				<h3>Default dialogs</h3>
				<p><pre class="brush:javascript">
					// alert dialog
					alertify.alert("Message");</pre></p>

				<p><pre class="brush:javascript">
					// confirm dialog
					alertify.confirm("Message", function (e) {
						if (e) {
							// user clicked "ok"
						} else {
							// user clicked "cancel"
						}
					});</pre></p>

				<p><pre class="brush:javascript">
					// prompt dialog
					alertify.prompt("Message", function (e, str) {
						// str is the input text
						if (e) {
							// user clicked "ok"
						} else {
							// user clicked "cancel"
						}
					}, "Default Value");</pre></p>
				<nav class="button-group">
					<a class="button-primary" href="#" id="alert">Alert Dialog</a>
					<a class="button-primary" href="#" id="confirm">Confirm Dialog</a>
					<a class="button-primary" href="#" id="prompt">Prompt Dialog</a>
				</nav>
			</div>
		</section>

		<section class="block">
			<div class="container">
				<h3>Default notifications</h3>
				<p><pre class="brush:javascript">
					// standard notification
					// setting the wait property to 0 will
					// keep the log message until it's clicked
					alertify.log("Notification", type, wait);</pre></p>

				<p><pre class="brush:javascript">
					// success notification
					// shorthand for alertify.log("Notification", "success");
					alertify.success("Success notification");</pre></p>

				<p><pre class="brush:javascript">
					// error notification
					// shorthand for alertify.log("Notification", "error");
					alertify.error("Error notification");</pre></p>
				<nav class="button-group">
					<a class="button-primary" href="#" id="notification">Standard Log</a>
					<a class="button-primary" href="#" id="success">Success Log</a>
					<a class="button-primary" href="#" id="error">Error Log</a>
				</nav>
			</div>
		</section>

		<h2><span>customizable properties</span></h2>
		<section class="block">
			<div class="container">
				<p><pre class="brush:javascript">
					// using the `set` method
					alertify.set( ... );</pre></p>
			</div>
		</section>

		<section class="block">
			<div class="container">
				<h3>Delay</h3>
				<p><pre class="brush:javascript">
					// time (in ms) before log message hides
					// default: 5000
					alertify.set({ delay: 10000 });
					// log will hide after 10 seconds
					alertify.log("Notification");
					// setting the delay to 0 will leave
					// the log message until it's clicked
					alertify.log("Notification", "", 0);</pre></p>
				<nav class="button-group">
					<a class="button-primary" href="#" id="delay">Hide in 10 seconds</a>
					<a class="button-primary" href="#" id="forever">Persistent Log</a>
				</nav>
			</div>
		</section>

		<section class="block">
			<div class="container">
				<h3>Button labels</h3>
				<p><pre class="brush:javascript">
					// custom OK and Cancel label
					// default: OK, Cancel
					alertify.set({ labels: {
						ok     : "Accept",
						cancel : "Deny"
					} });
					// button labels will be "Accept" and "Deny"
					alertify.confirm("Message");</pre></p>
				<nav class="button-group">
					<a class="button-primary" href="#" id="labels">Custom Labels</a>
				</nav>
			</div>
		</section>

		<section class="block">
			<div class="container">
				<h3>Button focus</h3>
				<p><pre class="brush:javascript">
					// which button receives focus
					// default: OK
					alertify.set({ buttonFocus: "cancel" }); // "none", "ok", "cancel"
					// focus will be given to the cancel button
					alertify.confirm("Message");</pre></p>
				<nav class="button-group">
					<a class="button-primary" href="#" id="focus">Button Focus</a>
				</nav>
			</div>
		</section>

		<section class="block">
			<div class="container">
				<h3>Button order</h3>
				<p><pre class="brush:javascript">
					// order of the buttons
					// default: Cancel, OK
					alertify.set({ buttonReverse: true }); // true, false
					// buttons order will be OK, Cancel
					alertify.confirm("Message");</pre></p>
				<nav class="button-group">
					<a class="button-primary" href="#" id="order">Button Order</a>
				</nav>
			</div>
		</section>

		<h2><span>custom notification</span></h2>
		<section class="block">
			<div class="container">
				<p><pre class="brush:javascript">
					// extend log method
					// set it
					alertify.custom = alertify.extend("custom");
					// use it
					alertify.custom("Notification");</pre></p>

				<nav class="button-group">
					<a class="button-primary" href="#" id="custom">Custom Log</a>
				</nav>
			</div>
		</section>

		<h2><span>custom themes</span></h2>
		<section class="block">
			<div class="container">
				<p><pre class="brush:javascript">
					// bootstrap theme
					// use bootstrap theme CSS
					// themes/alertify.bootstrap.css
					alertify.prompt("message", ...);</pre></p>

				<nav class="button-group">
					<a class="button-primary" href="#" id="bootstrap">Bootstrap Theme</a>
				</nav>
			</div>
		</section>
	</section>

	<footer class="footer">
		<div class="container">
			<p><a href="http://github.com/fabien-d/alertify.js/issues">Report an issue</a> | <a href="http://github.com/fabien-d/alertify.js">View on GitHub</a> | Follow Me on <a href="http://www.github.com/fabien-d"><i class="icon-github"></i>GitHub</a> and <a href="http://www.twitter.com/fabien_doiron"><i class="icon-twitter"></i>Twitter</a></p>
			<p><iframe style="border: 0; margin: 0; padding: 0;" src="https://www.gittip.com/fabien-d/widget.html" width="48pt" height="22pt"></iframe></p>
			<p>alertify.js is licensed under <a href="http://www.opensource.org/licenses/MIT">MIT</a>, copyright &copy; Fabien Doiron</p>

			<ul class="featured-list">
				<li><a href="http://blog.teamtreehouse.com/explaining-css-landing-pages-treehouse-show-ep-22" class="treehouse">The Treehouse Show, Ep. 22</a></li>
				<li><a href="http://www.webdevradio.com/?id=131" class="webdev">webdev radio, Ep. 105</a></li>
			</ul>
		</div>
	</footer>

	<script src="../lib/alertify.min.js"></script>
	<script src="assets/js/lib/sh/shCore.js"></script>
	<script src="assets/js/lib/sh/shBrushJScript.js"></script>
	<script>
		SyntaxHighlighter.all()
	</script>

	<script>
		"use strict";
		var
		$ = function (id) {
			return document.getElementById(id);
		},
		reset = function () {
			$("toggleCSS").href = "../themes/alertify.default.css";
			alertify.set({
				labels : {
					ok     : "OK",
					cancel : "Cancel"
				},
				delay : 5000,
				buttonReverse : false,
				buttonFocus   : "ok"
			});
		};

		// ==============================
		// Standard Dialogs
		$("alert").onclick = function () {
			reset();
			alertify.alert("This is an alert dialog");
			return false;
		};

		$("confirm").onclick = function () {
			reset();
			alertify.confirm("This is a confirm dialog", function (e) {
				if (e) {
					alertify.success("You've clicked OK");
				} else {
					alertify.error("You've clicked Cancel");
				}
			});
			return false;
		};

		$("prompt").onclick = function () {
			reset();
			alertify.prompt("This is a prompt dialog", function (e, str) {
				if (e) {
					alertify.success("You've clicked OK and typed: " + str);
				} else {
					alertify.error("You've clicked Cancel");
				}
			}, "Default Value");
			return false;
		};

		// ==============================
		// Standard Dialogs
		$("notification").onclick = function () {
			reset();
			alertify.log("Standard log message");
			return false;
		};

		$("success").onclick = function () {
			reset();
			alertify.success("Success log message");
			return false;
		};

		$("error").onclick = function () {
			reset();
			alertify.error("Error log message");
			return false;
		};

		// ==============================
		// Custom Properties
		$("delay").onclick = function () {
			reset();
			alertify.set({ delay: 10000 });
			alertify.log("Hiding in 10 seconds");
			return false;
		};

		$("forever").onclick = function () {
			reset();
			alertify.log("Will stay until clicked", "", 0);
			return false;
		};

		$("labels").onclick = function () {
			reset();
			alertify.set({ labels: { ok: "Accept", cancel: "Deny" } });
			alertify.confirm("Confirm dialog with custom button labels", function (e) {
				if (e) {
					alertify.success("You've clicked OK");
				} else {
					alertify.error("You've clicked Cancel");
				}
			});
			return false;
		};

		$("focus").onclick = function () {
			reset();
			alertify.set({ buttonFocus: "cancel" });
			alertify.confirm("Confirm dialog with cancel button focused", function (e) {
				if (e) {
					alertify.success("You've clicked OK");
				} else {
					alertify.error("You've clicked Cancel");
				}
			});
			return false;
		};

		$("order").onclick = function () {
			reset();
			alertify.set({ buttonReverse: true });
			alertify.confirm("Confirm dialog with reversed button order", function (e) {
				if (e) {
					alertify.success("You've clicked OK");
				} else {
					alertify.error("You've clicked Cancel");
				}
			});
			return false;
		};

		// ==============================
		// Custom Log
		$("custom").onclick = function () {
			reset();
			alertify.custom = alertify.extend("custom");
			alertify.custom("I'm a custom log message");
			return false;
		};

		// ==============================
		// Custom Themes
		$("bootstrap").onclick = function () {
			reset();
			$("toggleCSS").href = "../themes/alertify.bootstrap.css";
			alertify.prompt("Prompt dialog with bootstrap theme", function (e) {
				if (e) {
					alertify.success("You've clicked OK");
				} else {
					alertify.error("You've clicked Cancel");
				}
			}, "Default Value");
			return false;
		};
	</script>

</body>
</html>